<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收银台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .bs-red {
            color: red;
        }
    </style>
</head>
<body>
<div class="container mt-5">
    <div class="card p-4">
        <h2 class="text-center mb-4">订单支付</h2>
        <p>订单号：<span id="order-sn" class="fw-bold"></span></p>
        <p>订单金额：￥<span id="order-amount" class="fw-bold bs-red"></span></p>
        <!-- <button id="wechat-pay" class="btn btn-success w-100 mb-2">微信支付</button>-->
        <button id="alipay-pay" class="btn btn-primary w-100 mb-2 pay-btn">立即支付</button>
        <button id="pay-success" class="btn btn-success w-100 mb-2" style="display: none">订单已支付</button>
    </div>
</div>

<script src="https://source.alipay168.cn/static/comm/weui/js/zepto.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.11.6/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.min.js"></script>

<script>

    $(document).ready(function () {
        const urlParams = new URLSearchParams(window.location.search);
        //console.log('api_base_url',urlParams.get('api_base_url'))
        const orderSn = urlParams.get('order_sn');
        const apiBaseUrl = urlParams.get('api_base_url');
        const token = urlParams.get('token');
        //console.log(apiBaseUrl)
        $('#order-sn').text(orderSn);

        queryOrder();

        function queryOrder() {
            $.ajax({
                url: apiBaseUrl + '/api/payment/cashier_query',
                type: 'GET',
                dataType: 'json',
                headers: {
                    'Authorization': 'Bearer ' + token
                },
                data: {
                    order_sn: orderSn,
                },
                success: function (res) {
                    if (res.code == 0) {
                        $('#order-amount').text(res.data.order_amount);
                        if (res.data.pay_status === 1) {
                            $('#pay-success').show();
                            $('.pay-btn').hide();
                        }
                    }
                }
            })
        }

        //post
        function fetchPayConfig(payMethod, callback) {
            $.ajax({
                url: apiBaseUrl + '/api/payment/cashier_pay',
                type: 'POST',
                dataType: 'json',
                headers: {
                    'Authorization': 'Bearer ' + token,
                    'bsfrom': 'h5',
                },
                data: {
                    order_sn: orderSn,
                    pay_method: payMethod,
                },
                success: function (res) {
                    if (res.code == 0) {
                        callback(res.data);
                    } else {
                        alert('获取支付配置失败');
                    }
                },
                error: function (error) {
                    console.log(error);
                    alert('网络错误');
                }
            });
        }

        $('#wechat-pay').click(function () {
            fetchPayConfig('wechat', function (config) {
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', config,
                    function (res) {
                        if (res.err_msg == "get_brand_wcpay_request:ok") {
                            alert('支付成功');
                        } else {
                            alert('支付失败');
                        }
                    }
                );
            });
        });

        $('#alipay-pay').click(function () {
            fetchPayConfig('alipay', function (config) {
                let formHtml = config.formHtml;
                $('body').append(formHtml);
            });
        });

    });
</script>

</body>
</html>
